<!DOCTYPE html>
<html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>天地图－地图API－范例－地图类型控件</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                /* height: 100%; */
            }
            #map {
                width: 100%;
                /* height: 100%; */
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
            .info{
                font-size: 12px;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                line-height: 1.5;
                font-weight: 300;
                color: #111213;
                box-sizing: border-box;
                margin-right: 0;
                margin-left: 0;
                border-top-color: grey;
                padding: .75rem 1.25rem;
                margin-bottom: 1rem;
                border-radius: .25rem;
                position: fixed;
                top: 1rem;
                background-color: white;
                width: auto;
                min-width: 22rem;
                border-width: 0;
                right: 1rem;
                box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
            }
        
        </style>
        <script type="text/javascript" src=""http://api.tianditu.gov.cn/api?v=4.0&tk=221235558777aa7ecf9768be68130745"></script>
        
    </head>
    <body>
        <div id="map"></div>
        <div class="info">
            <label>是否支持系统定位功能：</lable><label id="msg"></label>
            <div >
                <label>经纬度位置：</label><a id="sys_lng_lat" style="color: darkblue;"></a>
                <button onclick="copyText()" style="background-color: #0fe352;font-size: medium;">复制经纬度</button>
            </div>
            <!-- <label>详细参数：</lable> -->
            <p  id="content" style="color:rgb(46, 8, 235)"></p>
            <p  id="error_info" style="color: crimson;"></p>  
        </div>
        
        
        <script>
            //初始化地图对象
            map = new T.Map("map", {datasourcesControl: true});
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), 12);
            //创建对象
            var ctrl = new T.Control.MapType();
            //添加控件
            map.addControl(ctrl);
        </script>
        <script>

            //点击按钮获取地理位置信息
              //getCurrentPosition与定时器setInterval类似多次请求，因为位置需要不间断的获取
              //直接navigator.geolocation表示单次获取位置
              navigator.geolocation.getCurrentPosition(function (position) {
                document.getElementById("msg").innerHTML = "支持";
                str="——  "+position.coords.longitude+","+position.coords.latitude+"  ——";
                document.getElementById("sys_lng_lat").innerHTML = str;
                var position_msg = "其他参数：<br>";
                position_msg += "准确度：	" + position.coords.accuracy + "<br>";
                position_msg += "海拔：	" + position.coords.altitude + "<br>";
                position_msg += "海拔准确度：	" + position.coords.altitudeAcuracy + "<br>";
                position_msg += "行进方向：	" + position.coords.heading + "<br>";
                position_msg += "地面速度：	" + position.coords.speed + "<br>";
                position_msg += "请求的时间：	" + new Date(position.timestamp) + "<br>";
                document.getElementById("content").innerHTML = position_msg;
              }, function (err) {
                document.getElementById("msg").innerHTML = "不支持";
                // alert("code：返回获取位置的状态："+err.code);
                var error_msg = "code:"+err.code;
                switch (err.code) { 
                    case 0:error_msg += "不包括其他错误编号中的未知错误"; 
                    break; 
                    case 1:error_msg += "用户拒绝浏览器获取位置信息"; 
                    break; 
                    case 2:error_msg += "尝试获取用户信息，但失败了"; 
                    break; 
                    case 3:error_msg += "设置了timeout值，获取位置超时了"; 
                    break; 
                }
                // var error_shuoming = "<p>返回获取位置的状态："
                // 	+"<p>0  :  不包括其他错误编号中的错误</p>"
                // 	+"<p>1  :  用户拒绝浏览器获取位置信息</p>"
                // 	+"<p>2  :  尝试获取用户信息，但失败了</p>"
                // 	+"<p>3  :   设置了timeout值，获取位置超时了</p>"
        
                document.getElementById("error_info").innerHTML = error_msg;
                // document.getElementById("shuoming").innerHTML = error_shuoming;
              }, {
                  enableHighAcuracy: false, //位置是否精确获取
                  timeout: 5000,            //获取位置允许的最长时间
                  maximumAge: 1000          //多久更新获取一次位置
                })
          </script>
          <script>
            function copyText() {
              var text = document.querySelector("#sys_lng_lat").textContent;
              //var text = "要复制的文本";
              navigator.clipboard.writeText(text).then(function() {
                var retext = "经纬度："+text+"已复制到剪贴板";
                alert(retext);
              }, function(err) {
                alert("无法复制文本: ", err);
              });
            }
        </script>
    </body>
</html>